<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <!-- //作业：在原有作业基础上,使用list遍历商品,每个商品初始为100个商品数量，给个input输入，输入1 对应的商品数据要 -1，如果剩余数量为0，不展示 -->
     <ul>
        <li v-for="item,index in goods">
            <div v-if="(item.totalNumber-item.buyNum)>0">
                <div>{{item.name}}---{{item.price}}</div>
                <div>剩余---------{{Number(item.totalNumber)-Number(item.buyNum)}}</div>
                <div>购买 <input v-model="item.buyNum"></div>
                <img width="200" height="200" v-bind:src="item.img" alt="">
            </div>
        </li>
    </ul>
</body>
<script src="https://unpkg.com/vue@3.2.47/dist/vue.global.js"></script>
<script>
    Vue.createApp({
        data:function(){
            return{
                goods:[
                    {name:'库洛米',price:101,totalNumber:100,buyNum:0,img:'https://img1.baidu.com/it/u=1241083896,158623871&fm=253&fmt=auto&app=138&f=JPEG?w=663&h=500'},
                    {name:'美乐蒂',price:999,totalNumber:100,buyNum:0,img:'https://img0.baidu.com/it/u=808369449,3452578561&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500'},
                    {name:'hellokitty',price:100,totalNumber:100,buyNum:0,img:'https://img0.baidu.com/it/u=1055224432,3815284099&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500'},

                ]
            }
        }
    }).mount("body")
</script>
</html>